<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>weibo</title>
    <link href="style/weibo.css" rel="stylesheet" type="text/css"/>
    <script src="lib/vue.js"></script>

</head>
<body>
<div class="jyArea">
    <take-comment :get-all="getAll" :add-comment="addComment"></take-comment>
    <comment-on :change-like="changeLike" :delete-comments="deleteComments" :comment-list="commentList" :page-size="pageSize"></comment-on>
</div>
</body>
<script type="module">
    import TakeComment from './components/TakeComment.js';
    import CommentOn from "./components/CommentOn.js";
    import  "./lib/axios.js";
    Vue.prototype.$axios = axios;
    new Vue({
        el: ".jyArea",
        data:{
            commentList :[
                {
                    id : Math.random().toString(36).slice(2),
                    content : '好用推荐',
                    addTime : "2024-03-10 01:01:01",
                    upNum : 10,
                    downNum :2
                },
                {
                    id : Math.random().toString(36).slice(2),
                    content : '内容2',
                    addTime : "2024-77-10 78:34:01",
                    upNum : 0,
                    downNum :0
                },
                {
                    id : Math.random().toString(36).slice(2),
                    content : '我爱学习',
                    addTime : "2024-03-77 55:55:01",
                    upNum : 8,
                    downNum :200
                },
                {
                    id : Math.random().toString(36).slice(2),
                    content : '大连很好',
                    addTime : "2024-25-10 88:88:01",
                    upNum : 99,
                    downNum :0
                },
                {
                    id : Math.random().toString(36).slice(2),
                    content : '今天很冷',
                    addTime : "2025-19-10 22:22:22",
                    upNum : 0,
                    downNum :20
                },
                {
                    id : Math.random().toString(36).slice(2),
                    content : '这家很好吃',
                    addTime : "2024-25-10 88:88:01",
                    upNum : 10000,
                    downNum :200
                },
                {
                    id : Math.random().toString(36).slice(2),
                    content : '我是美女',
                    addTime : "2025-19-10 22:22:22",
                    upNum : 11,
                    downNum :99
                },
            ],
            pageSize :5,
        },
        components: {
            TakeComment,
            CommentOn
        },
        methods:{
            deleteComments(id){
                this.commentList = this.commentList.filter(item=>{
                    return item.id !== id;
                })
            },
            changeLike(id,type){
                this.commentList = this.commentList.map(item=>{
                    if(item.id === id){
                        item[type]++;
                    }
                    return item;
                })
            },
            addComment(content,time){
                console.log(111)
                if(content.trim()){
                    console.log(content)
                    this.commentList = [
                        {
                            id : Math.random().toString(36).slice(2),
                            content : content,
                            addTime : time,
                            upNum : 0,
                            downNum :0
                        },
                        ...this.commentList
                    ]
                }else {
                    alert('请输入内容')
                }
            },
            getAll(){
                axios.get(`http://shenxiaoxu.com/getData`, {}).then(value=>{
                    console.log(value)
                });
            }
        }
    })


</script>
</html>